<template>
  <div class="about-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="gradient-text">关于我们</h1>
        <p>传承荣誉 守护信仰</p>
      </div>
    </div>

    <!-- 导航标签 -->
    <div class="section-container">
      <el-tabs v-model="activeTab" class="custom-tabs">
        <el-tab-pane label="国护简介" name="intro">
          <div class="intro-content">
            <div class="intro-text">
              <h2 class="gradient-text">大学国旗护卫队</h2>
              <p>国旗护卫队成立于2000年，是学校最高规格的礼仪性学生组织。作为校园精神文明建设的重要载体，国旗护卫队担负着升降国旗、重大活动礼仪等光荣使命。</p>
              <div class="intro-features">
                <div class="intro-feature">
                  <i class="el-icon-flag"></i>
                  <h3>升旗任务</h3>
                  <p>每周一次的升旗仪式，展现庄严肃穆</p>
                </div>
                <div class="intro-feature">
                  <i class="el-icon-trophy"></i>
                  <h3>礼仪执勤</h3>
                  <p>校园重大活动的礼仪保障</p>
                </div>
                <div class="intro-feature">
                  <i class="el-icon-medal"></i>
                  <h3>文化传承</h3>
                  <p>传承红色基因，弘扬爱国精神</p>
                </div>
              </div>
            </div>
            <div class="intro-gallery">
              <el-carousel height="400px" :interval="4000">
                <el-carousel-item v-for="image in galleryImages" :key="image.url">
                  <img :src="image.url" :alt="image.description">
                  <div class="carousel-caption">{{ image.description }}</div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="发展历程" name="history">
          <div class="history-content">
            <el-timeline>
              <el-timeline-item
                v-for="(milestone, index) in milestones"
                :key="index"
                :timestamp="milestone.year"
                placement="top">
                <div class="timeline-card glass-effect">
                  <h3>{{ milestone.title }}</h3>
                  <p>{{ milestone.description }}</p>
                  <img v-if="milestone.image" :src="milestone.image" :alt="milestone.title">
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-tab-pane>

        <el-tab-pane label="部门介绍" name="departments">
          <div class="departments-grid">
            <div class="department-card glass-effect" v-for="dept in departments" :key="dept.id">
              <div class="department-icon">
                <i :class="dept.icon"></i>
              </div>
              <h3>{{ dept.name }}</h3>
              <p class="department-desc">{{ dept.description }}</p>
              <div class="department-duties">
                <h4>主要职责：</h4>
                <ul>
                  <li v-for="(duty, index) in dept.duties" :key="index">{{ duty }}</li>
                </ul>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AboutPage',
  data() {
    return {
      activeTab: 'intro',
      galleryImages: [
        {
          url: 'https://img.zcool.cn/community/01639e5d8b1927a8012060be0f0ddb.jpg',
          description: '升旗仪式现场'
        },
        {
          url: 'https://img.zcool.cn/community/01e0bc5d8b1927a8012060be78795f.jpg',
          description: '队列训练展示'
        },
        {
          url: 'https://img.zcool.cn/community/01639e5d8b1927a8012060be0f0ddb.jpg',
          description: '重大活动礼仪'
        }
      ],
      milestones: [
        {
          year: '2000年',
          title: '国旗护卫队成立',
          description: '在校团委指导下正式成立国旗护卫队',
          image: 'https://img.zcool.cn/community/01e0bc5d8b1927a8012060be78795f.jpg'
        },
        {
          year: '2005年',
          title: '制度完善',
          description: '建立健全各项规章制度，形成完整的培训体系'
        },
        {
          year: '2010年',
          title: '十周年庆典',
          description: '举办十周年庆典，获得校级优秀学生组织称号'
        },
        {
          year: '2015年',
          title: '规模扩大',
          description: '队伍规模扩大到100人，承担更多校园礼仪任务'
        },
        {
          year: '2020年',
          title: '二十周年华诞',
          description: '举办二十周年庆典，展现新时代国护风采'
        }
      ],
      departments: [
        {
          id: 1,
          name: '办公室',
          icon: 'el-icon-office-building',
          description: '国旗护卫队的综合协调部门',
          duties: [
            '负责日常事务管理',
            '协调各部门工作',
            '组织内部活动',
            '管理队内档案资料'
          ]
        },
        {
          id: 2,
          name: '宣传部',
          icon: 'el-icon-data-analysis',
          description: '对外展示国护形象的窗口',
          duties: [
            '负责对外宣传工作',
            '管理官方社交媒体',
            '记录队伍重要活动',
            '设计宣传材料'
          ]
        },
        {
          id: 3,
          name: '作训部',
          icon: 'el-icon-medal',
          description: '队伍训练的核心部门',
          duties: [
            '制定训练计划',
            '组织日常训练',
            '考核队员表现',
            '培训新队员'
          ]
        }
      ]
    }
  }
}
</script>

<style scoped>
.about-page {
  min-height: calc(100vh - var(--header-height));
  background: var(--background-light);
}

.page-header {
  height: 300px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.header-content {
  z-index: 1;
}

.header-content h1 {
  font-size: 3em;
  margin-bottom: 10px;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 简介部分 */
.intro-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.intro-text {
  padding-right: 40px;
}

.intro-text h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.intro-text p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 30px;
}

.intro-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.intro-feature {
  text-align: center;
  padding: 20px;
}

.intro-feature i {
  font-size: 36px;
  margin-bottom: 15px;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.intro-gallery {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.el-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
}

/* 发展历程 */
.timeline-card {
  padding: 20px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}

.timeline-card img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-top: 15px;
}

/* 部门介绍 */
.departments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.department-card {
  padding: 30px;
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.department-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.department-icon {
  font-size: 48px;
  margin-bottom: 20px;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.department-desc {
  color: var(--text-secondary);
  margin: 15px 0;
}

.department-duties {
  margin-top: 20px;
}

.department-duties h4 {
  margin-bottom: 10px;
  color: var(--text-primary);
}

.department-duties ul {
  list-style: none;
  padding: 0;
}

.department-duties li {
  color: var(--text-secondary);
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
}

.department-duties li::before {
  content: '•';
  color: #6366f1;
  position: absolute;
  left: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .intro-content {
    grid-template-columns: 1fr;
  }
  
  .intro-text {
    padding-right: 0;
  }
  
  .intro-features {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    height: 200px;
  }
}
</style> 